<template>
  <div class="details">
    <div class="list" v-for="(item, index) in 3" :key="index">
      <div class="headline">
        {{
          index == 0
            ? "基础信息"
            : index == 1
              ? "我的钱包"
              : index == 2
                ? "订单列表"
                : ""
        }}
      </div>

      <div class="parallel" v-if="index == 0">
        <div class="array" v-for="(v, j) in 4" :key="j">
          <div class="title">
            {{
              j == 0
                ? "用户头像"
                : j == 1
                  ? "用户昵称"
                  : j == 2
                    ? "联系方式"
                    : j == 3
                      ? "注册时间"
                      : ""
            }}：
          </div>
          <div class="img" v-if="j == 0">
            <img :src="detailsObj.avatar" alt="" />
          </div>
          <div class="text text-line" v-else>
            {{ j == 1 ? detailsObj.nickname : j == 2 ? detailsObj.phone : j == 3 ? detailsObj.createTime : "" }}
          </div>
        </div>
      </div>

      <div class="parallel" v-if="index == 1">
        <div class="array" v-for="(v, j) in 2" :key="j">
          <div class="title">
            {{
              j == 0
                ? "余额"
                : j == 1
                  ? "积分"
                  : j == 2
                    ? "使用余额"
                    : j == 3
                      ? ""
                      : ""
            }}：
          </div>

          <div class="title">
            {{ j == 0 ? detailsObj.balance : j == 1 ? detailsObj.integral : j == 2 ? "10" : "" }}
          </div>
        </div>
      </div>

      <div class="table" v-if="index == 2" v-loading="loading">
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
          color: '#333333',
          backgroundColor: '#f3f3f3',
        }">
          <el-table-column prop="orderNo" label="订单号" width="250" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="用户手机号" width="180" align="center"> </el-table-column>
          <el-table-column prop="" label="订单状态" width="150" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.orderStatus == 'WAIT'">待付款</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'PAYMENT'">已付款</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'CANCEL'">已取消</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'SEND'">待发货</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'START'">已发货</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'SIGN'">待签收</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'FINISH'">已签收</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'REJECTION'">已拒收</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'AFTER'">售后中</el-tag>
              <el-tag v-else-if="scope.row.orderStatus == 'RETURN'">售后完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="订单金额(元)" width="250"> </el-table-column>
          <el-table-column prop="" label="订单商品">
            <template slot-scope="scope">
              <div class="commodity">
                <div class="surface">
                  <div class="left">
                    <img :src="scope.row.goodStockImage" alt="">
                  </div>
                  <div class="right">
                    <div class="title">
                      商品名称：{{ scope.row.goodName }}
                    </div>
                    <div class="stock">
                      规格：<el-tag>{{ scope.row.goodStockProperty }} </el-tag> <span style="margin-left: 100px">数量：{{
                        scope.row.goodNum }}</span>
                    </div>
                    <!-- <div class="stock">
                      商品单价：{{ scope.row.retailPrice }}
                      <span style="margin-left: 100px">商品总价：{{ scope.row.paymentPrice }}</span>
                    </div> -->
                  </div>
                </div>
              </div>

            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="220">
          </el-table-column>
        </el-table>


        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userListId
} from '@/api/user'

import {
  orderList,
  orderLogisticsList,
  orderShipmentsList
} from '@/api/order'


export default {
  data() {
    return {
      id: '',
      detailsObj: {},
      //-----------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      loading: false,
      commonValue: ''
    };
  },
  created() {
    this.id = this.$route.query.id

    this.userListIdMet()
  },
  methods: {
    userListIdMet() {
      let params = this.id
      userListId(params).then(res => {
        if (res.errorCode == null) {
          res.resultData.balance = Number(res.resultData.balance / 100)

          this.detailsObj = res.resultData
          this.commonValue = res.resultData.phone
          this.loading = true
          this.orderListMet()

        }
      })
    },

    orderListMet() {
      let params = {
        keyWord: this.commonValue,
        pageSize: this.limit,
        pageNo: this.page,
      }

      orderList(params).then(res => {
        if (res.errorCode == null) {
          res.resultData.orderList.forEach((item, index) => {
            item.paymentPrice = Number(item.paymentPrice / 100).toFixed(2);
            item.retailPrice = Number(item.retailPrice / 100).toFixed(2);
            item.price = Number(item.price / 100).toFixed(2);
            item.realityFreight = Number(item.realityFreight / 100).toFixed(2);

          });

          this.tableData = res.resultData.orderList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      })
    },
    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.orderListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.orderListMet();
    },
  },
};
</script>

<style lang="less" scope>
.details {
  .list {
    .headline {
      padding: 10px;
      box-sizing: border-box;
      background: #eef5fd;
      display: flex;
      align-items: center;
      border-radius: 5px;
    }

    .parallel {
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      height: 70px;

      .array {
        display: flex;
        align-items: center;
        width: calc(100% / 4);

        .title {
          color: rgba(0, 0, 0, 0.7);

        }

        .text {
          color: rgba(0, 0, 0, 0.7);
          width: 60%;
        }

        .img {
          width: 50px;
          height: 50px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }

    .table {
      margin-top: 10px;

      .commodity {
        padding: 10px 10px 0;
        box-sizing: border-box;

        .surface {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #ccc;

          .left {
            width: 120px;
            height: 100px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .right {
            .title {
              margin-bottom: 10px;
            }

            .stock {
              margin-bottom: 10px;
            }

            .stock:last-child {
              margin-bottom: 0;
            }
          }
        }

        .surface:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}
</style>